<template>
    <table class="cmp cmp-url table table-bordered">
        <tbody>
            <tr v-for="(v,i) in urlList" :key="i">
                <td>{{ v.label }}</td>
                <td>{{ v.url }}</td>
                <td>{{ v.statusCode }}</td>
                <td>{{ v.status }}</td>
                <td><button type="button" class="btn btn-link" @click="openByBrowser(v)">在浏览器访问</button></td>
            </tr>
        </tbody>
    </table>
</template>

<script>
const { shell } = global.require('electron')

export default {
	name: 'cmp-url',
    props: {
        website: { type: String, default: '' }
    },
	data () {
		return {
            urlList: [
                {label: '敏感路径', url: '/robots.txt', statusCode: '', status: ''},
                {label: '说明文件', url: '/readme.md', statusCode: '', status: ''},
                // phpinfo()信息泄露
                {label: 'phpinfo信息', url: '/test.php', statusCode: '', status: ''},
                {label: 'phpinfo信息', url: '/phpinfo.php', statusCode: '', status: ''},
                // 测试网页泄露在外网
                {label: '测试网页', url: '/test.cgi', statusCode: '', status: ''},
                {label: '测试网页', url: '/info.php', statusCode: '', status: ''},
                {label: '测试网页', url: '/dvwa', statusCode: '', status: ''},
                // 编辑器备份文件泄漏在外网
                {label: '编辑器备份文件', url: '/test.php.swp', statusCode: '', status: ''},
                {label: '编辑器备份文件', url: '/test.php.bak', statusCode: '', status: ''},
                {label: '编辑器备份文件', url: '/test.jsp.old', statusCode: '', status: ''},
                {label: '编辑器备份文件', url: '/cgi~', statusCode: '', status: ''},
                {label: '编辑器备份文件', url: '/index.php~', statusCode: '', status: ''},
                {label: '编辑器备份文件', url: '/.index.php.swp', statusCode: '', status: ''},
                // 版本管理工具（如git）文件信息泄露
                {label: '版本管理工具文件', url: '/.git', statusCode: '', status: ''},
                {label: '版本管理工具文件', url: '/.git/config', statusCode: '', status: ''},
                {label: '版本管理工具文件', url: '/CVS/Entriesp', statusCode: '', status: ''},
                {label: '版本管理工具文件', url: '/.svn/entriesp', statusCode: '', status: ''},
                // HTTP认证信息泄露
                {label: 'HTTP认证信息', url: '/basic/index.php', statusCode: '', status: ''},
                // 管理后台地址泄露
                {label: '管理后台', url: '/login.php', statusCode: '', status: ''},
                {label: '管理后台', url: '/admin.php', statusCode: '', status: ''},
                {label: '管理后台', url: '/manager.php', statusCode: '', status: ''},
                {label: '管理后台', url: '/admin_login.php', statusCode: '', status: ''},
                {label: '管理后台', url: '/phpMyAdmin', statusCode: '', status: ''},
            ],
        }
	},
    watch: {
        website: {
            handler () {
                this.fetchAll()
            },
            immediate: true
        }
    },
    methods: {
        fetchAll () {
            if (!this.website) return this.$toast('无效的网站地址')
            this.urlList.forEach((v, i) => {
                let url = this.website + v.url
                fetch(url, {method: 'head'}).then(res => {
                    this.$set(this.urlList[i], 'statusCode', res.status)
                    if (res.status === 200) {
                        this.$set(this.urlList[i], 'status', '存在')
                    } else if (res.status === 404) {
                        this.$set(this.urlList[i], 'status', '不存在')
                    } else {
                        this.$set(this.urlList[i], 'status', '')
                    }
                }).catch((err) => {
                    console.log(err)
                    this.$set(this.urlList[i], 'statusCode', '')
                    this.$set(this.urlList[i], 'status', '请求出错')
                })
            })
        },
		openByBrowser(item) {
            let url = this.website + item.url
			shell.openExternal(url)
		},
    }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.cmp-url {
    td:nth-child(1) {
        width: 20%;
        text-align: center;
    }
    td:nth-child(3),
    td:nth-child(4) {
        width: 15%;
        text-align: center;
    }
    td:nth-child(5) {
        width: 20%;
        text-align: center;
    }
}
</style>
